<template>
  <div class="inputNumber">
    <span class="borderR noselect" @click='reduceNum'>-</span>
    <input class="textC" v-model="inputNum" type="text">
    <span class="borderL noselect" @click='addNum'>+</span>
  </div>
</template>
<script>
export default {
  data() {
    return {
      inputNum: 0
    }
  },
  props: {
    value: {
      type: Number,
      default: 0
    }
  },
  watch: {
    inputNum(v) {
      if (/\D/g.test(v)) {
        this.inputNum = 0
      }
      this.$emit('input', v)
    },
    value(v) {
      this.inputNum = v
    }
  },
  methods: {
    reduceNum() {
      if (this.inputNum < 1) return
      this.inputNum--
    },
    addNum() {
      this.inputNum++
    }
  }
}
</script>
<style lang="stylus" scoped>
.inputNumber
  display inline-block
  width 90px
  border 1px solid #e4e6e6
  overflow hidden
  border-radius 3px
  input
    width 40px
    outline none
    height 24px
    padding 3px 5px
    float left
  span
    width 24px
    float left
    background #ffffff
    height 24px
    line-height 24px
    text-align center
    cursor pointer
</style>
